<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<title>劲松商城后台</title>
<div th:include="Admin/public/Common::head"></div>
</head>
<body>
<div class="main-wrap">
	<div th:include="Admin/public/Common::menu"></div>
	<div class="content-wrap">
<div th:replace="Admin/public/Common::header"></div>
		<main class="main-cont content mCustomScrollbar">
			<div class="page-wrap">
				<!--开始::内容-->
				<section class="page-hd">
					<header>
						<h2 class="title">web弹层组件</h2>
						<p class="title-description">
							layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。更多效果查看其<a href="http://layer.layui.com/" target="_blank">官方文档</a>
						</p>
					</header>
					<hr>
				</section>
				<div class="panel panel-default">
					<div class="panel-bd">
						<button id="a1" class="btn btn-info">Alert</button>
						<button id="a2" class="btn btn-info">询问层</button>
						<button id="a3" class="btn btn-info">提示层</button>
						<button id="a4" class="btn btn-info">加载层</button>
						<button id="a5" class="btn btn-info">小tips</button>
						<button id="a6" class="btn btn-info">Tab层</button>
						<button id="a7" class="btn btn-info">iframe弹窗</button>
					</div>
				</div>
				<!--开始::结束-->
			</div>
		</main>
		<div th:replace="Admin/public/Common::footer"></div>
	</div>
</div>
<script>
$('#a1').click(function(){
	layer.alert('内容')
});
$('#a2').click(function(){
	layer.confirm('您是如何看待前端开发？', {
	  btn: ['重要','奇葩'] //按钮
	}, function(){
	  layer.msg('的确很重要', {icon: 1});
	}, function(){
	  layer.msg('也可以这样', {
		time: 20000, //20s后自动关闭
		btn: ['明白了', '知道了']
	  });
	});
});
$('#a3').click(function(){
	layer.msg('玩命提示中');
});	
$('#a4').click(function(){
	var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
	setTimeout(function(){
        layer.closeAll('loading');
      }, 2000);
});	
$('#a5').click(function(){
	//小tips
	layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '#a5', {
	  tips: [1, '#76d4f5'],
	  time: 4000
	});
});	
$('#a6').click(function(){
	//tab层
	layer.tab({
	  area: ['600px', '300px'],
	  tab: [{
		title: 'TAB1', 
		content: '内容1'
	  }, {
		title: 'TAB2', 
		content: '内容2'
	  }, {
		title: 'TAB3', 
		content: '内容3'
	  }]
	});
});
$('#a7').click(function(){
layer.open({
  type: 2,
  title: false,
  closeBtn: 0, //不显示关闭按钮
  shade: [0],
  area: ['340px', '215px'],
  offset: 'rb', //右下角弹出
  time: 2000, //2秒后自动关闭
  anim: 2,
  content: ['http://www.deathghost.cn', 'no'], //iframe的url，no代表不显示滚动条
  end: function(){ //此处用于演示
    layer.open({
      type: 2,
      title: '很多时候，我们想最大化看，比如像这个页面。',
      shadeClose: true,
      shade: false,
      maxmin: true, //开启最大化最小化按钮
      area: ['893px', '600px'],
      content: 'http://www.deathghost.cn/'
    });
  }
});
});	
</script>
</body>
</html>
